<template>
    <div class="slideshow" :style="{ height: height, width: width }">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div v-for="item, index in swiperSlide" :key="index" class="swiper-slide"
                    :class="isNeedBoxShadow ? 'boxShadow' : ''" @click="jump(item)">
                    <div class="image" :style="{ width: '100%', height: isNeedTitle ? 'calc(100% - 30px)' : '100%' }">
                        <el-image :style="{ width: '100%', height: '100%' }" :src="item.imgUrl" fit="fill"></el-image>
                    </div>
                    <div v-show="isNeedTitle" class="title ellipsis">{{ item.title }}</div>
                </div>
            </div>
            <div v-show="swiperSlide.length > 3" class="swiper-button-next swiper-button"></div>
            <div v-show="swiperSlide.length > 3" class="swiper-button-prev swiper-button"></div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
    name: 'App',
    components: {},
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
        isNeedTitle: {
            type: Boolean,
            default: false
        },
        isNeedBoxShadow: {
            type: Boolean,
            default: false
        },
        swiperSlide: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            swiper: null,
        }
    },
    mounted() {
        //初始轮播插件
        this.$nextTick(() => {
            this.createSwiper();
            setTimeout(() => {
                this.$nextTick(() => {
                    this.createSwiper();
                });
            }, 1000)
        });
    },
    methods: {
        jump(item) {
            console.log(item)
            let jumpType = item.type || item.jumpType;
            if (jumpType == 'URL' && item.url) {
                window.open(item.url, '_blank')
            } else if (jumpType == 'ARTICLE' && item.articleId) {
                this.$router.push({
                    path: '/navigation', query: {
                        articleId: item.articleId,
                        name: '文章'
                    }
                })
            }
        },
        //初始轮播插件 swiper的使用方式详见https://www.swiper.com.cn/api/index.html
        createSwiper() {
            this.swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 10,
                slidesPerGroup: 3,
                loopFillGroupWithBlank: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: this.swiperSlide.length > 3 ? true : false,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.ellipsis {
    width: 100%;
    /* 设置你需要的宽度 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.image {
    overflow: hidden;

    .el-image {
        transition: all 0.3s;

        &:hover {
            transform: scale(1.1);
        }
    }
}


.slideshow {
    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        font-size: 14px;
        font-weight: bold;
        box-sizing: border-box;
        border: 1px solid #dcdcdc;
        background-color: #ffffff;
        cursor: pointer;
    }

    .swiper-slide .title {
        height: 30px;
        text-align: center;
    }

    ::v-deep .swiper-button {
        background-color: #000000b1;

    }

    ::v-deep .swiper-button-prev {
        left: 0;
    }

    ::v-deep .swiper-button-next {
        right: 0;
    }

    ::v-deep .swiper-button-next:after {
        font-size: 16px;
        color: #ffffff;
        right: 0;
    }

    ::v-deep .swiper-button-prev:after {
        font-size: 16px;
        color: #ffffff;
    }
}
</style>